<!DOCTYPE html>
<style>
    body { margin:8px; font-size:16px; }
</style>
<script src="../../../resources/check-layout.js"></script>
<p>Given a float followed by a regular block with the same height as the float, then a block B with
    a negative margin: Check that a line inside B doesn't overlap with the float. There's an empty
    collapse-through block before B, so that our initial logical top estimate fails and we have to
    relayout. When laying out again, we have to detect that the float that we first thought didn't
    affect the line now affects it.</p>
<p>The word "BINGO" should be seen below, to the right of a blue block.</p>
<div style="width:20em; color:blue;">
    <div>
        <div style="float:left; width:8em; height:8em; margin-right:1em; background:blue;"></div>
        <div style="height:8em;"></div>
        <div>
            <!-- Here's an empty block that we can just collapse through, but we don't realize that
                 when calculating our initial top estimate on its parent, so we have to relayout
                 when it turns out that a negative margin has pulled us upwards (and suddenly we
                 have a line that's affected by the float). -->
            <div></div>

            <div class="testee" data-total-x="8" style="margin-top:-4em;">
                <span class="testee" data-total-x="152">BINGO</span>
            </div>
        </div>
    </div>
</div>
<p id="result" style="clear:both;"></p>
<script>
    checkLayout(".testee", document.getElementById("result"));
</script>
